<template>
  <div class="system-logs">
    <div class="header">
      <h2>系统日志与审计</h2>
    </div>

    <!-- 筛选条件 -->
    <el-card class="filter-card">
      <el-form :inline="true" :model="filterForm" class="filter-form">
        <el-form-item label="操作类型">
          <el-select v-model="filterForm.action" placeholder="请选择操作类型" clearable>
            <el-option label="登录" value="登录"></el-option>
            <el-option label="登出" value="登出"></el-option>
            <el-option label="档案查看" value="档案查看"></el-option>
            <el-option label="档案下载" value="档案下载"></el-option>
            <el-option label="发布公告" value="发布公告"></el-option>
            <el-option label="上传培训资料" value="上传培训资料"></el-option>
            <el-option label="提交档案修改申请" value="提交档案修改申请"></el-option>
            <el-option label="审批档案修改申请" value="审批档案修改申请"></el-option>
            <el-option label="执行档案修改" value="执行档案修改"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="时间范围">
          <el-date-picker
            v-model="filterForm.dateRange"
            type="datetimerange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            format="yyyy-MM-dd HH:mm:ss"
            value-format="yyyy-MM-dd HH:mm:ss">
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="searchLogs">查询</el-button>
          <el-button @click="resetFilter">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <!-- 日志列表 -->
    <el-table :data="logs" style="width: 100%" v-loading="loading">
      <el-table-column prop="username" label="用户" width="120"></el-table-column>
      <el-table-column prop="action" label="操作类型" width="150"></el-table-column>
      <el-table-column prop="actionDetails" label="操作详情" show-overflow-tooltip></el-table-column>
      <el-table-column prop="timestamp" label="操作时间" width="180">
        <template slot-scope="scope">
          {{ formatDate(scope.row.timestamp) }}
        </template>
      </el-table-column>
      <el-table-column label="操作" width="100">
        <template slot-scope="scope">
          <el-button size="mini" @click="viewLogDetail(scope.row)">详情</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <div class="pagination-container">
      <el-pagination
        @current-change="handleCurrentChange"
        @size-change="handleSizeChange"
        :current-page="currentPage"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="pageSize"
        :total="total"
        layout="total, sizes, prev, pager, next, jumper"
        background>
      </el-pagination>
    </div>

    <!-- 日志详情对话框 -->
    <el-dialog title="日志详情" :visible.sync="detailDialogVisible" width="600px">
      <div v-if="currentLog">
        <el-descriptions :column="1" border>
          <el-descriptions-item label="用户">{{ currentLog.username || '系统' }}</el-descriptions-item>
          <el-descriptions-item label="操作类型">{{ currentLog.action }}</el-descriptions-item>
          <el-descriptions-item label="操作详情">{{ currentLog.actionDetails }}</el-descriptions-item>
          <el-descriptions-item label="操作时间">{{ formatDate(currentLog.timestamp) }}</el-descriptions-item>
        </el-descriptions>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import service from '@/utils/request'

export default {
  name: 'SystemLogs',
  data() {
    return {
      logs: [],
      loading: false,
      currentPage: 1,
      pageSize: 10,
      total: 0,
      detailDialogVisible: false,
      currentLog: null,
      filterForm: {
        action: '',
        dateRange: []
      }
    }
  },
  mounted() {
    this.loadLogs()
  },
  methods: {
    /**
     * 加载系统日志数据
     * 支持分页和查询条件筛选
     */
    async loadLogs() {
      this.loading = true
      try {
        // 构建查询参数
        let params = {
          current: this.currentPage,
          size: this.pageSize
        }
        
        // 添加筛选条件
        if (this.filterForm.action) {
          params.action = this.filterForm.action
        }
        
        if (this.filterForm.dateRange && this.filterForm.dateRange.length === 2) {
          params.startTime = this.filterForm.dateRange[0]
          params.endTime = this.filterForm.dateRange[1]
        }
        
        const response = await service.get('/api/system-logs/page', { params })
        if (response.data.code === 200) {
          this.logs = response.data.data.records
          this.total = response.data.data.total
        }
      } catch (error) {
        this.$message.error('加载日志失败')
      }
      this.loading = false
    },
    
    /**
     * 搜索日志
     * 重置页码并重新加载数据
     */
    searchLogs() {
      this.currentPage = 1
      this.loadLogs()
    },
    
    /**
     * 重置筛选条件
     * 清空所有筛选条件并重新加载数据
     */
    resetFilter() {
      this.filterForm = {
        action: '',
        dateRange: []
      }
      this.currentPage = 1
      this.loadLogs()
    },
    
    /**
     * 查看日志详情
     * @param {Object} log 日志对象
     */
    viewLogDetail(log) {
      this.currentLog = log
      this.detailDialogVisible = true
    },
    
    /**
     * 分页变化处理
     * @param {Number} page 新的页码
     */
    handleCurrentChange(page) {
      this.currentPage = page
      this.loadLogs()
    },
    
    /**
     * 页面大小变化处理
     * @param {Number} size 新的页面大小
     */
    handleSizeChange(size) {
      this.pageSize = size
      this.currentPage = 1 // 重置到第一页
      this.loadLogs()
    },
    
    /**
     * 格式化日期显示
     * @param {String} dateStr 日期字符串
     * @returns {String} 格式化后的日期
     */
    formatDate(dateStr) {
      if (!dateStr) return ''
      return new Date(dateStr).toLocaleString()
    }
  }
}
</script>

<style scoped>
.system-logs {
  padding: 20px;
}

.header {
  margin-bottom: 20px;
}

.filter-card {
  margin-bottom: 20px;
}

.filter-form {
  margin-bottom: 0;
}

.el-pagination {
  margin-top: 20px;
  text-align: center;
}

.pagination-container {
  margin-top: 20px;
  padding: 20px 0;
  text-align: center;
  background-color: #fafafa;
  border-top: 1px solid #e6e6e6;
}

.pagination-container .el-pagination {
  display: inline-block;
}
</style> 